<template>
  <el-dialog :title="title" :visible.sync="isShow" @close="closeEvent">
    <el-form ref="form" label-width="120px" :model="form" :rules="rules">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model.trim="form.name" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model.trim="form.code" />
      </el-form-item>
      <el-form-item prop="manager" label="部门负责人">
        <!-- <el-input /> -->
        <el-select v-model="form.manager" @focus="focusEvent">
          <el-option
            v-for="i in userList"
            :key="i.id"
            :label="i.username"
            :value="i.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input v-model="form.introduce" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="text-align: center">
        <el-button @click="closeEvent">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {
  sysUserSimple,
  companyDepartmentPost,
  companyDepartmentPut
} from '@/api/departments.js'
export default {
  props: {
    initTreeData: {
      type: Array,
      // 默认值为数组
      default: () => []
    }
  },
  data() {
    return {
      mode: 'add', // add:新增  edit:编辑  草稿。。。定义一个变量来区分不同场景
      isShow: false,
      // 下拉框的数据
      userList: [],
      // itemData 包含pid，id 和子级
      itemData: '',
      form: {
        name: '', // string 非必须   部门名称
        code: '', // string  非必须    部门编码 同级别不可重复
        manager: '', // string  非必须  负责人名称
        introduce: '', // string  非必须   介绍
        pid: '' //  string   非必须   父级部门ID
      },
      rules: {
        name: [
          { required: true, message: '必填', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              // 拿到点击项的子项数据
              // initTreeData:[{id,pid...}]
              // itemData:{id===子集的pid}
              const tempArr = this.initTreeData.filter((item) => {
                if (this.mode === 'add') {
                  // itemData 包含pid，id 和子级
                  // console.log('itemData', this.itemData)
                  // initTreeData 没有经过处理的数据
                  // console.log('initTreeData', this.initTreeData)
                  // console.log(this.itemData)
                  // 筛选出点击的节点的pid和全局的id相同的值
                  // 返回给 tempArr
                  return item.pid === this.itemData.id
                } else if (this.mode === 'edit') {
                  // 点击的是编辑按钮是
                  return (
                    // 找出兄弟部门并排除自己
                    item.pid === this.itemData.pid &&
                    item.id !== this.itemData.id
                  )
                }
              })
              // console.log('tempArr', tempArr)
              // console.log('组织架构', this.initTreeData)
              // callback()
              // 验证是否重名
              // 通过数组中的some方法
              // 当其中有有一个满足条件的值就返回true
              const bol = tempArr.some((item) => {
                return item.name === value
              })
              // 如果bol为true则提示错误
              bol ? callback(new Error('部门名称重名' + value)) : callback()
            }
          }
        ],
        code: [
          { required: true, message: '必填', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              const bol = this.initTreeData.some((item) => {
                if (this.mode === 'add') {
                  return item.code === value
                } else if (this.mode === 'edit') {
                  return item.code === value && item.id !== this.itemData.id
                }
              })
              bol ? callback(new Error('部门编码重复')) : callback()
            }
          }
        ],
        manager: [{ required: true, message: '必填', trigger: 'change' }],
        introduce: [{ required: true, message: '必填', trigger: 'change' }]
      }
    }
  },
  computed: {
    // 不同场景显示不同的标题
    title() {
      return {
        add: '新增部门',
        edit: '编辑部门'
      }[this.mode]
    }
  },
  mounted() {
    // bus监听
    // 接收兄弟组件传递过来的值
    this.$bus.$on('showDialog', (bol, itemData, mode) => {
      this.itemData = itemData
      // 讲父级id传给pid
      this.form.pid = itemData.id
      this.isShow = bol
      this.mode = mode // 接收兄弟组件传递的add或edit

      // 判断如果是编辑，数据要回显，深拷贝当前点击项的数据
      if (mode === 'edit') {
        this.form = JSON.parse(JSON.stringify(itemData))
      }
    })
  },
  beforeDestroy() {
    // 将兄弟传值终止
    this.$bus.$off('showDialog')
  },
  methods: {
    // 取消按钮
    closeEvent() {
      this.isShow = false
      // 在对话框的标签上添加一个close事件
      // 再使用resetFields方法 实现关闭对话框清空数据
      // 但是容易产生bug
      this.$refs.form.resetFields()
      // 因为elementUI中的resetFields方法是还原至初始值
      // 容易产生bug
      // 所有手动将数据清空
      this.form = {
        name: '', // string 非必须   部门名称
        code: '', // string  非必须    部门编码 同级别不可重复
        manager: '', // string  非必须  负责人名称
        introduce: '', // string  非必须   介绍
        pid: '' //  string   非必须   父级部门ID
      }
    },
    // 员工列表 下拉框
    async focusEvent() {
      // 如果下拉框数据为0
      // 发送请求拿到数据
      // 将数据赋值userList数组
      if (this.userList.length === 0) {
        const res = await sysUserSimple()
        this.userList = res.data
        // console.log(res)
      }
    },
    submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          // 当表单验证成功时 如果点击的是add添加对话框
          // 发送请求 不用变量接收
          // 提示验证成功
          if (this.mode === 'add') {
            await companyDepartmentPost(this.form)
            this.$message.success('验证成功')
          } else if (this.mode === 'edit') {
            // 如果点击的是编辑的对话框
            // 发送请求
            // 成功提示用户
            await companyDepartmentPut(this.form)
            this.$message.success('编辑成功')
          }
          // 关闭对话框
          // 重新渲染页面
          this.isShow = false
          this.$emit('getDate')
        }
      })
    }
  }
}
</script>

<style></style>
